<script setup>
import {
  deleteEmploymentMaterialApi,
  deleteEmploymentsMaterialApi,
  deleteInternshipMaterialApi,
  findEmploymentMaterialApi,
  getEmploymentMaterialListApi,
  uploadEmploymentMaterialApi
} from '@/api/job'
import Form from '@/components/User/Form.vue'
import Pagization from '@/components/common/pagization.vue'
import Table from '@/components/Job/table.vue'
import { showStatusMessage } from '@/utils/common/showMessage'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import FormJob from '@/components/Job/form.vue'
import axios from 'axios'

const router = useRouter()
const userStore = useUserStore()
// 表单数据
const formData = ref({
  desc: ''
})
const formModel = [
  {
    prop: 'desc',
    label: '材料',
    type: 'input'
  }
]
const btnOpt = [
  {
    name: '查询',
    btnType: '',
    prop: 'query'
  },
  {
    name: '重置',
    btnType: 'info',
    prop: 'reset'
  },
  {
    name: '添加',
    btnType: 'success',
    prop: 'add'
  }
]

const formRef = ref(null)
const pagizationToatl = ref(null)

/**
 * 获取表格数据
 */
async function getTableData(data) {
  const res = await getEmploymentMaterialListApi({ ...data, status: 0 })
  tableData.value = res.data.map((item) => {
    return {
      ...item
    }
  })
  pagizationToatl.value = res.total
}
getTableData()
const pagizationRef = ref(null)
const selectFormRef = ref(null)
/**
 * 点击重置按钮
 */
function reset() {
  getTableData()
  pagizationRef.value.reset()
  selectFormRef.value.reset()
}

/**
 * 表单按钮点击事件
 * @param type 操作类型
 * @param data 表单数据
 */
function handleForm(type, data) {
  // console.log(type, data)
  switch (type) {
    case 'query':
      query(data)
      break
    case 'add':
      addForm()
      break
    case 'output':
      exportToExcel()
      break
    case 'reset':
      reset(data)
      break
    case 'import':
      handleUpload(data)
      break
    case 'submit':
      handleSubmit(data)
      break

    default:
      break
  }
}

/**
 * 表单查询事件
 * @param {Object} data 查询条件
 */
const queryData = ref(null)
async function query(data) {
  console.log(data)

  queryData.value = data
  const res = await findEmploymentMaterialApi(data)
  tableData.value = res.data?.map((item) => {
    return {
      ...item
    }
  })
  pagizationToatl.value = res.total
  showStatusMessage(res)
  tableData.value = res.data
  pagizationToatl.value = res.total
}

// 列表数据
const tableData = ref([])
const columns = [
  {
    prop: 'desc',
    label: '就业材料名称'
  },
  {
    prop: 'material',
    label: '材料',
    display: 'button'
  },
  {
    prop: 'college',
    label: '需要提交的学院'
  },
  {
    prop: 'major',
    label: '需要提交的专业'
  },
  {
    prop: 'class',
    label: '需要提交的班级',
    width: '300'
  }
]
const options = [
  {
    label: '编辑',
    type: 'primary',
    prop: 'edit'
  },
  {
    label: '删除',
    type: 'danger',
    prop: 'delete'
  }
]
const docPreview = ref('')
const dialogViewVisible = ref(false)
async function handletTableMaterial(data) {
  const fileNamePop = data.material.split('/').pop().split('.').pop()
  const res = await axios({
    method: 'get',
    url: data.material,
    responseType: 'blob'
  })

  const blob = new Blob([res.data], {
    type: 'application/octet-stream' // 通用文件流类型
  })
  const fileName = `${data.desc}.${fileNamePop}`
  const a = document.createElement('a')
  const url = URL || window.webkitURL
  const href = url.createObjectURL(blob)
  a.style.display = 'none'
  a.href = href
  a.download = fileName
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  url.revokeObjectURL(href)
}
function handleDialogViewClose() {
  docPreview.value = ''
}
async function handletTableDelete(data) {
  console.log(data)
  const res = await deleteEmploymentsMaterialApi({ id: data.id })
  showStatusMessage(res)
  getTableData()
}
/**
 * 表格的操作事件
 * @param {Object} data  操作行的数据
 * @param {String} type 操作类型-’edit’-‘delete’
 */
function handleTable(data, type) {
  // console.log(data, type)
  switch (type) {
    case 'delete':
      handletTableDelete(data)
      break
    case 'material':
      handletTableMaterial(data)
      break

    default:
      break
  }
}
// 分页器条数发生变化
function handleSizeChange(val) {
  const data = selectFormRef.value.getValue()
  console.log('条数发生变化')
  getTableData({ size: val, ...data })
  pagizationRef.value.reset()
}
// 分页器页数发生变化
function handleCurrentChange(page, size) {
  const data = selectFormRef.value.getValue()
  console.log('页数发生变化')
  getTableData({ page, size, ...data })
}

// 控制抽屉显示
const dialog = ref(false)
// 抽屉数据
const dialogData = ref({})

function handletTableDetail(data) {
  dialog.value = true
  dialogData.value = data
}

// 弹窗显示
const dialogTableVisible = ref(false)
const FormJobData = ref({
  desc: '',
  material: '',
  college: '',
  major: '',
  class: []
})
const formJobOpt = [
  {
    prop: 'desc',
    label: '就业材料名称',
    type: 'input'
  },
  {
    prop: 'college',
    label: '需要提交的学院',
    type: 'selectCollege'
  },
  {
    prop: 'major',
    label: '需要提交的专业',
    type: 'selectMajor'
  },
  {
    prop: 'class',
    label: '需要提交的班级',
    type: 'selectClass',
    attribute: 'multiple'
  },
  {
    prop: 'material',
    label: '上传材料模版文件',
    type: 'uploadMaterial'
  }
]
const btnJobOpt = [
  {
    name: '取消',
    btnType: 'info',
    prop: 'cancel'
  },
  {
    name: '提交',
    btnType: 'primary',
    prop: 'submit'
  }
]
const applyDataInfo = ref({
  desc: '',
  material: ''
})
const formJobRef = ref(null)
//dialog关闭前的回调
function handleDialogClose() {
  formJobRef.value.reset()
}
async function addForm() {
  dialogTableVisible.value = true
}
async function handleSubmit(data) {
  const res = await uploadEmploymentMaterialApi(data)
  showStatusMessage(res)
  dialogTableVisible.value = false
  getTableData()
  handleDialogClose()
}
</script>

<template>
  <div class="license-wrapper">
    <div class="user-content">
      <Form
        :data="formData"
        :formOpt="formModel"
        :btnOpt="btnOpt"
        @handleForm="handleForm"
        ref="selectFormRef"
      ></Form>
      <!-- 表格 -->
      <Table
        :tableData="tableData"
        :columns="columns"
        :options="options"
        @handleTable="handleTable"
      >
        <template #firstColumn>
          <el-table-column type="index" label="编号" width="100" align="center" />
        </template>
      </Table>
      <!-- 分页 -->
      <Pagization
        ref="pagizationRef"
        :total="pagizationToatl"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></Pagization>

      <!-- 填写实习资料 -->
      <el-dialog
        v-model="dialogTableVisible"
        title="填写就业任务"
        width="600"
        :modal="false"
        @close="handleDialogClose"
      >
        <FormJob
          ref="formJobRef"
          :data="FormJobData"
          :form-opt="formJobOpt"
          :btn-opt="btnJobOpt"
          @handleForm="handleForm"
        ></FormJob>
      </el-dialog>
      <!-- 文件预览 -->
      <el-dialog v-model="dialogViewVisible" top="5vh" width="1200" @close="handleDialogViewClose">
        <embed :src="docPreview" type="doc" width="100%" height="800" />
      </el-dialog>
      <iframe :src="docPreview" frameborder="0" style="display: none"></iframe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.license-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;

  .user-content {
    width: 100%;
    padding: 10px 50px;
    text-align: left;
    overflow: auto;

    .demo-drawer {
      .drawer-content {
        .content-list {
          margin-bottom: 28px;

          span {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
